<template>
  <div class="divisional">
    <div class="search_box" >
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in list_1" :key="index">
          <span class="inpText">{{item.name}}</span>
          <el-input v-model.trim="item.input_val" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容"></el-input>
        </el-col>

        <el-col :span="6" id="rqfw">
          <span class="inpText">还款时间</span>
          <el-date-picker v-model="dateVlaue" type="daterange" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-col>

        <el-col :span="6">
            <el-button size="small" type="primary" @click="search" style="margin-left: 67px;margin-top: 1%">查询</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>

    </div>

<!-- 列表 -->
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)"
          :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}" max-height="500px" style="width: 100%">
          <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
          <el-table-column prop="customerId" label="客户号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="peopleId" label="身份证号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="phoneNum" label="手机号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="contractNum" label="贷款合同号"></el-table-column>
          <el-table-column prop="bank" label="所属银行" width></el-table-column>
          <!-- <el-table-column prop="serialNumber" label="案件流水号" width></el-table-column> -->
          <!-- <el-table-column prop="repaymentAmount" label="还款金额"></el-table-column>
          <el-table-column prop="repaymentDate" label="还款时间"></el-table-column>
          <el-table-column prop="repaymentNum" label="还款账号"></el-table-column> -->
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15,20]"
        :page-size="pageSize"
        :total="total"

        layout="total, sizes, prev, pager, next, slot, jumper">
        </el-pagination>
    </div>
    <el-dialog :visible.sync="isInfodetail" width="75%">
      <span slot="title">信息详情</span>
      <div class="mainInfoBox">
        <div class="infoBox" v-for="(item,index) in infoList" :key="index">
          <label for>{{item.text}}:</label>
          <el-input v-model="item.value" size="small" disabled placeholder="请输入内容"></el-input>
        </div>

        <el-divider content-position="left">分案还款记录</el-divider>

        <el-row style="width: 100%;">
          <el-col >
            <el-table :data="infoRecords" :header-cell-style="{background:'LightYellow	',color:'black'}"
              style="width: 100%" >
              <el-table-column prop="serialNumber" label="案件流水号"></el-table-column>
              <!-- <el-table-column prop="overdueAmount" label="逾期金额"></el-table-column> -->
              <el-table-column prop="repaymentAmount" label="还款金额"></el-table-column>
              <el-table-column prop="repaymentNum" label="还款账号"></el-table-column>
              <el-table-column prop="repaymentDate" label="还款时间"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    Message
  } from "element-ui";
  import {
    cmcUrl
  } from '../../../static/baseUrl'
  export default {
    data() {
      return {
        loading: false,
        dateVlaue: "",
        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        list_1: [{
            name: "所属银行",
            input_val: "",
          },
          {
            name: "身份证号",
            input_val: "",
          },
          {
            name: "贷款合同号",
            input_val: "",
          },
          {
            name: "客户姓名",
            input_val: "",
          },
          {
            name: "手机号",
            input_val: "",
          },
          {
            name: "案件流水号",
            input_val: "",
          },
        ],
        options: [{
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        tableData: [/* {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          phoneNum: "12312344321",
          repaymentAmount: "123411",
          repaymentDate: "20200908",
          repaymentNum: "123656123123",
        }, */],
        //   逾期选择
        isFirstIssue: "",
        yuqiOptions: [{
            label: "是",
            value: 1,
            index: 0,
          },
          {
            label: "否",
            value: 0,
            index: 1,
          },
        ],
        //   催收
        cuishouNum: "",
        //   催收方式
        outbound: "",
        outboundOptions: [
          //    1短信 2智能 3人工
          {
            label: "短信",
            value: "1",
          },
          {
            label: "智能",
            value: "2",
          },
          {
            label: "人工",
            value: "3",
          },
        ],
        //   风险等级
        risklevel: "",
        risklevelOptions: [{
            label: "高风险",
            value: "高风险",
            index: 1,
          },
          {
            label: "中风险",
            value: "中风险",
            index: 2,
          },
          {
            label: "低风险",
            value: "低风险",
            index: 3,
          },
        ],
        //   逾期等级
        overdueLevelF: "",
        overdue_levelS: "",
        overdueLevelOptions: [{
            label: "M1",
            value: "M1",
            index: 1,
          },
          {
            label: "M2",
            value: "M2",
            index: 2,
          },
          {
            label: "M3",
            value: "M3",
            index: 3,
          },
        ],
        //   详情
        detailInfo: [],

        //详情页面要显示字段
        infoList: [/* {
          field: "serialNumber",
          text: "案件流水号",
          value:"",
        }, */{
          field: "name",
          text: "姓名",
          value:"",
        },{
          field: "peopleId",
          text: "身份证号",
          value:"",
        },{
          field: "bank",
          text: "所属银行",
          value:"",
        },{
          field: "customerId",
          text: "客户号",
          value:"",
        },{
          field: "phoneNum",
          text: "手机号",
          value:"",
        },{
          field: "contractNum",
          text: "贷款合同号",
          value:"",
        }/* ,{
          field: "receiptNum",
          text: "借据号",
          value:"",
        },{
          field: "overdueAmount",
          text: "逾期金额",
          value:"",
        } */],
        infoRecords:[],
      };
    },
    created() {
      this.checkInfo();
    },
    methods: {
      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },
      handleInfoDetail(val) {
        switch (val) {
          case "phoneNum":
            return "手机号";
          case "riskLecvel":
            return "风险等级";
          case "serialNumber":
            return "案件流水号";
          case "bank":
            return "所属银行";
          case "customerId":
            return "客户号";
          case "contractNum":
            return "贷款合同号";
          case "peopleId":
            return "身份证号";
          case "isFirstIssue":
            return "逾期次数";
          case "collectionTimes":
            return "催收次数";
          case "riskLevel":
            return "风险等级";
          case "overdueLevelF":
            return "逾期等级";
          case "outbound":
            return "下方方向";
          case "id":
            return "ID";
          case "receiptNum":
            return "贷款借据号";
          case "name":
            return "姓名";
          case "age":
            return "年龄";
          case "sex":
            return "性别";
          case "education":
            return "学历";
          case "maritalStatus":
            return "婚姻状况";
          case "overdueAmount":
            return "逾期金额";
          case "overdueDay":
            return "逾期天数";
          case "overduePrincipal":
            return "逾期本金";
          case "productName":
            return "产品名称";
          case "applicationTime":
            return "申请时间";
          case "lateCharge":
            return "逾期罚息";
          case "customerLabel":
            return "客群细分标签";
          case "repaymentNum":
            return "还款账号";
          case "collectionPriority":
            return "催收优先等级";
          case "interestRefund":
            return "退罚息";
          case "newAndOldLoansn":
            return "新老网贷";
          case "score":
            return "评分";
          case "state":
            return "状态";
          case "dataTime":
            return "数据时间";
          case "division":
            return "division";
          case "repaymentAmount":
            return "还款金额";
          case "repaymentDate":
            return "还款时间";
          case "scriptTemplate":
            return "话术模板";
          default:
            return val;
        }
      },
      handleClick(data) {
        console.log(data, "sss");
        let options = {
          peopleId: data["peopleId"],
          contractNum: data["contractNum"]
        }

        this.$axios({
            method: "post",
            url: `/CMC/division/getRecoverDetails`,
            data: options,
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.infoRecords = res.data.dataList;
              //this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {console.log(err)});

        Object.keys(this.infoList).forEach((item) => {
          let fiedMap = this.infoList[item];
          let key = fiedMap.field;
          this.$set(fiedMap,"value",data[key]);
        })
        //console.log(this.detailInfo, "this.detailInfo");
        this.isInfodetail = true;
      },
      reset() {
        console.log(this.dateVlaue);
        this.list_1.forEach((item) => {
          item.input_val = "";
        });
        this.dateVlaue = "";
      },
      search(){
        this.currentPage = 1;
        this.checkInfo();
      },
      checkInfo() {
        //   所属银行
        let bank = this.list_1[0].input_val;
        // 身份证
        let peopleId = this.list_1[1].input_val;
        // 贷款合同号
        let contractNum = this.list_1[2].input_val;
        // 客户号
        let name = this.list_1[3].input_val;
        // s手机号
        let phone = this.list_1[4].input_val;
        let serialNumber = this.list_1[5].input_val;
        // 是否逾期
        let isFirstIssue = this.isFirstIssue;
        //   催收次数
        let collectionTimes = this.cuishouNum;
        //   催收方式
        let outbound = this.outbound;
        //   风险等级
        let riskLevel = this.risklevel;
        //   逾期等级
        if(this.overdueLevelF){
          if(!this.overdue_levelS){
            this.overdue_levelS = this.overdueLevelF;
          }
        }
        if(this.overdue_levelS){
          if(!this.overdueLevelF){
            this.overdueLevelF = this.overdue_levelS;
          }
        }
        let overdueLevelF = this.overdueLevelF;
        let overdueLevelS = this.overdue_levelS;
        let dateVlaue = {
          'beginDate': this.dateVlaue === null ? null : this.dateVlaue[0],
          'endDate': this.dateVlaue === null ? null : this.dateVlaue[1]
        };
        let beginDate = this.dateVlaue === null ? null : this.dateVlaue[0];
        let endDate = this.dateVlaue === null ? null : this.dateVlaue[1];
        if(!beginDate){
          beginDate = null;
        }
        if(!endDate){
          endDate = null;
        }
        this.loading = true;
        let options = {
          state:2,//已还款
          bank: bank,
          peopleId: peopleId,
          contractNum: contractNum,
          name: name,
          phoneNum: phone,
          serialNumber: serialNumber,
          beginTime: beginDate==null?"":beginDate,
          endTime: endDate==null?"":endDate,
          //dataTime: this.dateVlaue,
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        this.$axios({
            method: "post",
            url: `/CMC/division/getRecoverBasics`,
            data: options,
          })
          .then((res) => {
            this.loading = false;
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 44px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          padding-left: 30px;
          padding-top: 40px;
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      /* height: 70vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }

    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        max-height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }

  @import "../../assets/css/base.css";

  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 60px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText{
    width: 60px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }

  #rqfw .el-range-editor.el-input__inner {
    padding: 2px 2px;
  }
</style>
